<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Product PreAdd</title>
        <%include("../inc/editCss.html"){};%>
        <style>
           .add-photo{
           	background:rgba(250,240,255,0.5); 
           	display:block; 
           	width:100%; 
           	height:100%; 
           	line-height:180px; 
           	text-align:center
           }
           
           #upload-info{
              display:none;
              padding: 10px;
              background:#ffffff;
              border:1px solid #000000;
              width:300px;
              height:120px;
              z-index:9999;
              top:0;
              left:0;
              position:absolute;
           }
           #upload-info .close-button{
              top: 5px;
              right:5px;
              position:absolute;
              cursor: pointer;
           }
           .img-info-container{
              margin:10px;
              height:180px; 
              width:220px; 
              float:left; 
              position:relative
           }
           .img-info-container:hover .img-buttons{
              display:block;
           }
           .img-info-container .img-buttons{
              display:none;
              width:220px;
              height:24px;
              background:rgba(0,0,0,0.6);
              color:#ffffff;
              position:absolute;
              top:0;
              left:0;
              text-align: right;
              z-index:1;
           }
           .img-info-container .img-buttons .fa{
              margin:3px;
              font-size: 18px;
              cursor: pointer;
           }
           .photo-infos{
               position: absolute;
               height:auto;
           }
        </style>
	</head>
	<body class="no-skin">
		<div class="container-fluid">
			<div class="row">
			  <div class="breadcrumbs">
				<ul class="breadcrumb">
					<li><i class="ace-icon fa fa-home home-icon"></i><a href="../index.jspx" target="_top">首页</a></li>
					<li><a href="list.jspx">产品</a></li>
					<li class="active">产品图片管理</li>
				</ul>
				  <!-- /.breadcrumb -->
			  </div>
			  <!-- /.breadcrumbs -->
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="page-content">
					<div class="page-header">
						<h1>产品图片管理</h1>
					</div>
					<div class="page-body">
						<div class="col-xd-12">
						    	<div class="form-group">
						    	    <input type="hidden" id="product_id" name="product_id" value="${product.id!0}">
 									<div class="col-xd-12">
 									<b>产品名称：</b>${product.name!}(${product.model!})
 									<p><b>产品说明：</b> <br>${product.description!}</p>
 									</div>
								</div>
								<div class="space-4"></div>
								
								<div class="form-group">
								    <button id="add-button" class="btn btn-primary" onclick="addPhoto(this,1,1);">新增图片</button>
								    <div id="upload-info">
						               <i class="fa fa-times close-button"></i>
						               <input type="hidden" id="photo_id" value="-1">
						               <input type="text" id="photo"> <button class="btn btn-sm btn-primary" id="save-button">保存</button>
						               <div id="upload2"></div>
						            </div>
								</div>
								<div class="form-group" style="min-height:300px">
								    <div class="photo-infos"></div>
                                    <script id="img-template" type="text/html">
                                       {{each photos as photo}}
                                       <div class="img-info-container">
                                           <img src="{{photo.url}}" data-id="{{photo.id}}" width="220" height="auto">
                                           <div class="img-buttons">
                                               <i class="fa fa-file-image-o" data-id="{{photo.id}}" title="设为缩略图"></i>
                                               <i class="fa fa-pencil" data-id="{{photo.id}}" title="修改"></i>
                                               <i class="fa fa-trash-o" data-id="{{photo.id}}" title="删除"></i>
                                           </div>
                                       </div>
                                       {{/each}}
                                    </script>
								</div>
					    </div>
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<%include("../inc/editJs.html"){};%>
        <script src="${request.contextPath}/static/assets/jquery/template.js"></script>
		<script>
		   $(document).ready(function(){
                $('.close-button').on('click',function(){
                     $(this).parent().hide();
                     root.customUploader.uploadFiles.destory("upload2");
                 });

                getPhotos();
                savePhoto();
                
		   });
           function savePhoto(){
               $('#save-button').on('click',function(){
                    var photo = $('#photo').val(),
                        id = $('#product_id').val(),
                        photoId = $('#photo_id').val();
                    $.post('savePhoto.jspx',{format:'json',url:photo,id:id,photo_id:photoId},function(data){
                          
                          if(data.hasError){
                        	  var $photoInfos = $('.photo-infos');
                        	  $photoInfos.append('<span style="color:red">'+data.message+'</span>');
                          }else{
                               getPhotos();
                               $('.close-button').click();
                          }

                    });
               });
           }
           /*
           e:控件对象 arguments[1]:对象的left是否需要在控件对象宽度之外，0覆盖 1需要加宽度 arguments[2]:初始化上传控件时，是否需要清空可能存在的值 1清空 其他为不清空
           */
           function addPhoto(e){
              var $this = $(e);
              var left = $this.offset().left,
                  top = $this.offset().top,
                  width = $this.outerWidth(),
                  realLeft = left + width,
                  height = $this.outerHeight();
              if(arguments[1]!==undefined && arguments[1]==0){
                  console.log(123);
                  realLeft = left;
              }else{
                  top = top - height;
              }
              if(arguments[2]!==undefined && arguments[2]==1){
                  $('#photo').val('');
                  $('#photo_id').val(-1);
              }
              var $uploadInfo = $('#upload-info');
              $uploadInfo.css('left',realLeft).css('top',top);
              $uploadInfo.show();
              root.customUploader.uploadFiles.init("photo","upload2","${request.contextPath}");
           }

           function getPhotos(){
                var $photoInfos = $('.photo-infos'),
                    productId = $('#product_id').val();
                $photoInfos.empty();
                $photoInfos.append('<span style="color:green">获取图片信息中...</span>');
                $.post('getPhotos.jspx',{format:'json',id:productId},function(data){
                    if(data!==undefined){
                        if(data.hasError){
                        	$photoInfos.empty();
                            $photoInfos.append('<span style="color:green">'+data.message+'</span>');
                        }else{
                             var imgTemplate = template('img-template',data);
                             $photoInfos.empty();
                             $photoInfos.append(imgTemplate);

                             delPhoto();
                             editPhoto();
                             changeDefaultPhoto();
                        }
                    }
                }); 
           }

           function editPhoto(){
              $('.img-buttons .fa-pencil').on('click',function(){
                    var $this = $(this),
                        id = $this.data('id');
                    $.get('editPhoto.jspx?format=json',{id:id},function(data){
                        if(data!==undefined && !data.hasError){
                            var photo = data.photo;
                            $('#photo_id').val(photo.id);
                            $('#photo').val(photo.url);
                            addPhoto($this.parent().parent(),0);
                        }
                    });
               });
           }

           function delPhoto(){
               $('.img-buttons .fa-trash-o').on('click',function(){
                   var $this = $(this),
                       id = $this.data('id');
                   if(confirm('确定要删除吗？')){
                         $.get('delPhoto.jspx?format=json',{id:id},function(data){
                              if(data!==undefined && !data.hasError){
                                  $this.parent().parent().remove();
                              }
                         });
                   }
               });
           }

           function changeDefaultPhoto(){
               //设为产品默认图片
        	   $('.img-buttons .fa-file-image-o').on('click',function(){
                   var $this = $(this),
                       id = $this.data('id');
                   $.get('changeDefaultPhoto.jspx?format=json',{id:id},function(data){
                          if(data!==undefined && !data.hasError){
                                alert("设置产品默认图片成功！");
                          }else{
                                alert(data.message);
                          }
                   });
               });
           }
		</script>
	</body>
</html>